<template>
  <a-locale-provider :locale="localeSetting">
    <div class="borderStyle">
      <div type="info"
           class="operator">
        <a-button @click="addItem"
                  icon="plus">新建</a-button>
        <a-button @click="eidtItem"
                  icon="edit">修改</a-button>
        <a-button @click="deleteItem"
                  icon="delete">删除</a-button>
        <a-button @click="viewItem"
                  icon="info-circle">查看</a-button>
        <a-dropdown>
          <a-menu @click="handleMenuClick"
                  slot="overlay">
            <a-menu-item key="lock">
              <a-icon type="lock" />禁用</a-menu-item>
            <a-menu-item key="unlock">
              <a-icon type="unlock" />启用</a-menu-item>
            <a-menu-item key="audit">
              <a-icon type="safety" />审批</a-menu-item>
          </a-menu>
          <a-button>
            <a-icon type="bars" /> 更多操作
            <a-icon type="down" />
          </a-button>
        </a-dropdown>
        <a-button :icon="advanced ? 'up' : 'down'"
                  @click="qSearch">
          高级查找
        </a-button>
      </div>
      <div :class="advanced ? null : 'showSearch'">
        <a-form layout="horizontal"
                :form="formQuery">
          <div>
            <a-row>
              <a-col :md="8"
                     :sm="24">
                <a-form-item label="姓 名"
                             :labelCol="{span: 5}"
                             :wrapperCol="{span: 18, offset: 1}"
                             key="name">
                  <a-input placeholder="请输入人员姓名"
                           v-decorator="['name',{}]" />
                </a-form-item>
              </a-col>
              <a-col :md="8"
                     :sm="24">
                <a-form-item label="身份证"
                             :labelCol="{span: 5}"
                             :wrapperCol="{span: 18, offset: 1}"
                             key="cardNo">
                  <a-input placeholder="请输入位身份证信息"
                           v-decorator="['cardNo',{}]" />
                </a-form-item>
              </a-col>
              <a-col :md="8"
                     :sm="24">
                <a-form-item label="状 态"
                             :labelCol="{span: 5}"
                             :wrapperCol="{span: 18, offset: 1}"
                             key="status">
                  <a-select placeholder="请选择"
                            v-decorator="['status',{}]"
                            mode="multiple">
                    <a-select-option value="0">在职</a-select-option>
                    <a-select-option value="1">停职</a-select-option>
                    <a-select-option value="2">离职</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
            </a-row>
            <a-row>
             <a-col :md="8"
                     :sm="24">
                <a-form-item label="性 别"
                             :labelCol="{span: 5}"
                             :wrapperCol="{span: 18, offset: 1}"
                             key="gender">
                  <a-select placeholder="请选择"
                            v-decorator="['gender',{}]"
                            mode="multiple">
                    <a-select-option value="0">男性</a-select-option>
                    <a-select-option value="1">女性</a-select-option>
                    <a-select-option value="2">未知</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :md="8"
                     :sm="24">
                <a-form-item label="出生日期"
                             :labelCol="{span: 5}"
                             :wrapperCol="{span: 18, offset: 1}"
                             key="birthday">
                  <a-date-picker style="width: 100%"
                                 placeholder="请输入出生日期"
                                 v-decorator="['birthday',{}]" />
                </a-form-item>
              </a-col>
              <a-col :md="8"
                     :sm="24">
                <a-form-item label="联系电话"
                             :labelCol="{span: 5}"
                             :wrapperCol="{span: 18, offset: 1}"
                             key="phone">
                  <a-input placeholder="请输入电话"
                           v-decorator="['phone',{}]" />
                </a-form-item>
              </a-col>
            </a-row>
          </div>
          <div>
            <a-row>
              <a-col :md="24"
                     :sm="24"
                     style="text-align: right;margin-bottom:18px;">
                <a-button type="primary"
                          icon="search"
                          @click="queryClick">查询</a-button>
                <a-button type="primary"
                          style="margin-left: 8px"
                          icon="rest"
                          @click='clearQueryClick'>重置</a-button>
              </a-col>
            </a-row>
          </div>
        </a-form>
      </div>
      <div class="alert">
        <a-alert type="info"
                 :show-icon="true">
          <div slot="message">
            已选择&nbsp;<a style="font-weight: 600">{{selectedRowKeys.length}}</a>&nbsp;项&nbsp;
            <a style="margin-left: 24px"
               @click="clearSelect">清空</a>
          </div>
        </a-alert>
      </div>
      <a-table :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
               :columns="columns"
               :dataSource="dataSource"
               :pagination="pagination"
               :loading="loading"
               :bordered="bordered"
               :rowKey="record => record.id"
               @change="handleTableChange">
        <template slot="name"
                  slot-scope="name">
          {{name}}
        </template>
        <template slot="gender"
                  slot-scope="gender">
          <span v-show="gender===0"
                style="color:grey">男性</span>
          <span v-show="gender===1"
                style="color:grey">女性</span>
          <span v-show="gender===2"
                style="color:red">未知</span>
        </template>
        <template slot="status"
                  slot-scope="status">
          <span v-show="status===0"
                style="color:green">在职</span>
          <span v-show="status===1"
                style="color:grey">停职</span>
          <span v-show="status===2"
                style="color:grey">离职</span>
        </template>
      </a-table>
      <detail-form ref="detailModal" @ok="handleOk" />
    </div>
  </a-locale-provider>
</template>

<script>
import zhCN from 'ant-design-vue/lib/locale-provider/zh_CN'
import { getList, removeItems } from '@/api/user'
import DetailForm from './modules/DetailForm'

const columns = [{
  dataIndex: 'id',
  key: 'id',
  title: '主键',
  width: 70,
  align: 'right'
  // customRender: (text, record, index) => index + 1
},
{
  title: '编号',
  dataIndex: 'code',
  sorter: true,
  align: 'right',
  width: 80
},
{
  title: '姓名',
  dataIndex: 'name',
  width: 120,
  scopedSlots: { customRender: 'name' }
}, {
  title: '性别',
  dataIndex: 'gender',
  filters: [
    { text: '男性', value: '0' },
    { text: '女性', value: '1' },
    { text: '未知', value: '2' }
  ],
  align: 'center',
  width: 80,
  scopedSlots: { customRender: 'gender' }
}, {
  title: '身份证',
  dataIndex: 'cardNo',
  width: 180
}, {
  title: '出生日期',
  dataIndex: 'birthday',
  sorter: true,
  width: 120
}, {
  title: '状态',
  dataIndex: 'status',
  width: 80,
  align: 'center',
  scopedSlots: { customRender: 'status' }
}, {
  title: '联系电话',
  dataIndex: 'phone',
  width: 120
}, {
  title: 'email',
  dataIndex: 'email'
}]

export default {
  props: ['detail'],
  mounted () {
    this.fetch({ pageSize: this.pagination.defaultPageSize })
  },
  components: {
    DetailForm
  },
  data () {
    return {
      dataSource: [],
      localeSetting: zhCN,
      pagination: { 'showQuickJumper': true, 'showSizeChanger': true, 'defaultPageSize': 10, showTotal: (total, range) => `当前：${range[0]}-${range[1]}, 共 ${total} 项` },
      loading: false,
      columns: columns,
      bordered: true,
      selectedRowKeys: [],
      advanced: false,
      formQuery: this.$form.createForm(this),
      tableFilters: {},
      tableOrder: {}
    }
  },
  methods: {
    onSelectChange (selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys
    },
    toggleAdvanced () {
      this.advanced = !this.advanced
    },
    handleTableChange (pagination, filtersArg, sorter) {
      const pager = { ...this.pagination }
      pager.current = pagination.current
      this.pagination = pager

      const filters = Object.keys(filtersArg).reduce((obj, key) => {
        const newObj = { ...obj }
        newObj[key] = this.getValue(filtersArg[key])
        return newObj
      }, {})

      // 记录列表筛选条件
      this.tableFilters = { ...filters }
      this.tableOrder = { sorter: sorter.field, order: sorter.order }

      const query = this.getQuery()

      const params = {
        pageSize: pagination.pageSize,
        currentPage: pagination.current,
        ...filters,
        ...query
      }

      if (sorter.field) {
        params.sorter = sorter.field
        params.order = sorter.order
      }

      this.fetch(params)
    },
    fetch (params = {}) {
      this.loading = true
      getList({ ...params }).then((data) => {
        let ret = data.data
        const pagination = { ...this.pagination }
        pagination.total = ret.pagination.total
        pagination.current = parseInt(ret.pagination.currentPage)
        this.loading = false
        this.dataSource = JSON.parse(JSON.stringify(ret.results))
        this.pagination = pagination
      })
    },
    getValue (arry) {
      return arry.join(',')
    },
    handleMenuClick (e) {
      this.$message.info('功能正在紧张有序的开发过程中!')
    },
    addItem () {
      this.$refs.detailModal.init({editType: 'add'})
    },
    eidtItem () {
      if (this.selectedRowKeys.length === 1) {
        this.$refs.detailModal.init({editType: 'edit', id: this.selectedRowKeys[0]})
      } else {
        this.$message.warning('请选择一个有效数据!')
      }
    },
    viewItem () {
      if (this.selectedRowKeys.length === 1) {
        this.$refs.detailModal.init({editType: 'view', id: this.selectedRowKeys[0]})
      } else {
        this.$message.warning('请选择一个有效数据!')
      }
    },
    deleteItem () {
      if (this.selectedRowKeys.length === 0) {
        this.$message.warning('请先选择待删除数据')
        return false
      } else {
        let me = this
        this.$confirm({
          title: '确定删除这些数据?',
          content: `当前选中了:${this.selectedRowKeys.length}项`,
          onOk () {
            me.loading = true
            let items = me.selectedRowKeys.join(',')
            removeItems({ ids: items }).then((data) => {
              let ret = data.data
              me.loading = false
              if (ret.success === true) {
                me.$message.success('删除成功')
                me.selectedRowKeys = []
                me.reLoad()
              } else {
                me.$error({
                  title: '删除失败',
                  content: `删除过程发生了以下错误：${ret.message}`
                })
              }
            })
          }
        })
      }
    },
    handleOk () {
      this.queryClick()
    },
    qSearch () {
      this.advanced = !this.advanced
    },
    clearQueryClick () {
      this.formQuery.resetFields()
    },
    queryClick () {
      let params = { ...this.getQuery(), ...this.tableFilters, ...this.tableOrder }
      this.fetch(params)
    },
    getQuery () {
      let qf = this.formQuery.getFieldsValue()
      if (qf['birthday']) {
        qf.birthday = this.$moment(qf.birthday).format('YYYY-MM-DD')
      }

      if (qf['status']) {
        qf.status = qf.status.join(',')
      }

      if (qf['gender']) {
        qf.gender = qf.gender.join(',')
      }

      return qf
    },
    reLoad () {
      let params = {
        pageSize: this.pagination.pageSize,
        currentPage: this.pagination.current,
        ...this.getQuery(),
        ...this.tableFilters,
        ...this.tableOrder
      }

      this.fetch(params)
    },
    clearSelect () {
      this.selectedRowKeys = []
    }

  },
  activated () {
    // 明细返回时 会带replace参数，如果有参数，则刷新页面数据
    if (this.$route.params.replace) {
      this.reLoad()
    }
  }
}
</script>
<style lang="less" scoped>
.operator {
  margin-bottom: 18px;
  border: 1px solid #e8e8e8;
  background-color: #fafafa;
  padding: 5px;
}
.showSearch {
  display: none;
}
.alert {
  margin-bottom: 18px;
}
.borderStyle {
  margin: 0;
  padding: 0;
}
</style>
